<template>
  <div style="color: white;">
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="padding">
      <v-tooltip />
      <v-legend
        :custom="legendCustom"
        :allow-all-canceled="legendAllowAllCanceled"
        :items="legendItems"
        :textStyle="textStyle"
        position="top-center"
        :offsetY="-5"
        :on-click="legendOnClick" />
      <v-axis data-key="rejectsRate" :grid="axisGrid" :label="axisLabel" :line="ILineStyle" />
      <v-axis data-key="rejectsNum" :grid="axisGrid" :label="axisLabel" :line="ILineStyle" />
      <v-axis data-key="time" :grid="axisGrid" :label="axisLabel" :line="ILineStyle" />
      <v-bar position="time*rejectsNum" color="#956FD4" />
      <v-smooth-line position="time*rejectsRate" color="#F02FC2" :size="gemoSize" />
      <v-point shape="circle" position="time*rejectsRate" color="#fff" :size="pointSize" />
    </v-chart>
  </div>
</template>

<script>
import { RejectsResult } from '@/api/modular/main/bigScreen/bigScreenManage'
  const data = [
    {
      time: '10:10',
      rejectsNum: 2,
      rejectsRate: 0.03
    },
    {
      time: '10:15',
      rejectsNum: 6,
      rejectsRate: 0.03
    },
    {
      time: '10:20',
      rejectsNum: 2,
      rejectsRate: 0.05
    },
    {
      time: '10:25',
      rejectsNum: 9,
      rejectsRate: 0.01
    },
    {
      time: '10:30',
      rejectsNum: 2,
      rejectsRate: 0.03
    },
    {
      time: '10:35',
      rejectsNum: 2,
      rejectsRate: 0.01
    },
    {
      time: '10:40',
      rejectsNum: 1,
      rejectsRate: 0.02
    },
    {
      time: '10:45',
      rejectsNum: 2,
      rejectsRate: 0.03
    },
    {
      time: '10:50',
      rejectsNum: 6,
      rejectsRate: 0.03
    },
    {
      time: '10:55',
      rejectsNum: 2,
      rejectsRate: 0.04
    },
    {
      time: '11:00',
      rejectsNum: 6,
      rejectsRate: 0.01
    },
    {
      time: '11:05',
      rejectsNum: 2,
      rejectsRate: 0.03
    },
    {
      time: '11:10',
      rejectsNum: 2,
      rejectsRate: 0.01
    },
    {
      time: '11:15',
      rejectsNum: 3,
      rejectsRate: 0.04
    }
  ]

  const scale = [{
    dataKey: 'rejectsNum',
    alias: '不良品数量',
    min: 0
  }, {
    dataKey: 'rejectsRate',
    alias: '不良品率',
    min: 0
  }]

  const ILineStyle = {
    stroke: 'white'
  }

  const textStyle = {
    fill: 'white',
    fontsize: '18'
  }

  export default {
    data() {
      return {
        data: data,
        scale,
        height: 400,
        ILineStyle: ILineStyle,
        textStyle: textStyle,
        axisLabel: {
          textStyle: {
            fill: '#fff',
            rotate: 30,
            fontSize: 11
          }
        },
        axisGrid: null,
        padding: '66',
        gemoSize: 3,
        pointSize: 5,
        legendCustom: true,
        legendAllowAllCanceled: true,
        legendItems: [{
            value: '不良品数量',
            alias: 'rejectsNum',
            marker: {
              symbol: 'square',
              fill: '#956FD4',
              radius: 5
            }
          },
          {
            value: '不良品率',
            alias: 'rejectsRate',
            marker: {
              symbol: 'hyphen',
              stroke: '#F02FC2',
              radius: 5,
              lineWidth: 3
            }
          }
        ],
        legendOnClick: (ev, chart) => {
          const item = ev.item
          const value = item.alias
          const checked = ev.checked
          const geoms = chart.getAllGeoms()
          for (let i = 0; i < geoms.length; i++) {
            const geom = geoms[i]
            if (geom.getYScale().field === value) {
              if (checked) {
                geom.show()
              } else {
                geom.hide()
              }
            }
          }
        }
      }
    },
    created() {
        RejectsResult().then((res) => {
            this.data = res.data
            for (const v of this.data) {
              v.time = v.time.slice(5)
            }
        })
    }
  }
</script>
